//显示学生成绩
<template>
  <div class="table">

    <div class="search-input">
      <div class="search-title"><span>我的分数</span></div>
      <div class="search-info">
        <el-select v-model="search.major" placeholder="课程名称" filterable clearable @change="doSearch">
          <!-- 使用 v-for 遍历专业数组 -->
          <el-option v-for="(major, index) in majors" :key="index" :label="major.name" :value="major.name">
          </el-option>
        </el-select>
        <el-select style="width: 100px;margin: 0 20px;" v-model="search.six" placeholder="是否及格" filterable clearable
          @change="doSearch">
          <el-option label="是" :value="1"></el-option>
          <el-option label="否" :value="2"></el-option>
        </el-select>
      </div>
    </div>
    <div class="title"></div>
    <section class="content-el">
      <el-table ref="filterTable" :data="score" v-loading="loading" height="380" stripe>
        <el-table-column prop="answerDate" label="考试日期" sortable width="300" column-key="answerDate" :filters="filter"
          :filter-method="filterHandler">
        </el-table-column>
        <el-table-column prop="subject" label="课程名称" width="300" filter-placement="bottom-end">
          <template slot-scope="scope">
            <el-tag>{{scope.row.subject}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="etScore" label="考试分数" width="200"></el-table-column>
        <el-table-column label="是否及格" width="100">
          <template slot-scope="scope">
            <el-tag :type="scope.row.etScore>= 60 ? 'success' : 'danger'">{{scope.row.etScore >= 60 ? "及格" :
              "不及格"}}</el-tag>
          </template>
        </el-table-column>
      </el-table>
      <el-row type="flex" justify="center" align="middle" class="pagination">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page="pagination.current" :page-sizes="[4,6,8,10]" :page-size="pagination.size"
          layout="total, sizes, prev, pager, next, jumper" :total="pagination.total">
        </el-pagination>
      </el-row>
    </section>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        search: {
          major: '',
          six: ''
        },
        majors: [ // 定义常见专业数组
          { id: 1, name: '网络基础' },
          { id: 2, name: '操作系统' },
          { id: 3, name: 'C语言' },
          { id: 4, name: 'Web前端' },
          { id: 5, name: '软件工程' },
          { id: 6, name: '通信工程' },
          { id: 7, name: '高等数学' },
        ],
        pagination: { //分页后的留言列表
          current: 1, //当前页
          total: null, //记录条数
          size: 10 //每页条数
        },
        loading: false, //加载标识符
        score: [], //学生成绩
        filter: null //过滤参数
      }
    },
    created() {
      this.getScore()
      this.loading = true //数据加载则遮罩表格
    },
    methods: {
      getScore() {
        let studentId = this.$cookies.get("cid")
        this.$axios(`/api/score/${this.pagination.current}/${this.pagination.size}/${studentId}`).then(res => {
          if (res.data.code == 200) {
            this.loading = false //数据加载完成去掉遮罩
            this.score = res.data.data.records
            this.pagination = { ...res.data.data }
            let mapVal = this.score.map((element, index) => { //通过map得到 filter:[{text,value}]形式的数组对象
              let newVal = {}
              newVal.text = element.answerDate
              newVal.value = element.answerDate
              return newVal
            })
            let hash = []
            const newArr = mapVal.reduce((item, next) => { //对新对象进行去重操作
              hash[next.text] ? '' : hash[next.text] = true && item.push(next);
              return item
            }, []);
            this.filter = newArr
          }
        })
      },
      doSearch() {
        console.log(this.search)
        this.$cookies.get("cid")

        this.$axios({
          url: '/api/scoreSearch',
          method: 'post',
          data: {
            ...this.search,
            studentId: this.$cookies.get("cid"),
            size: this.pagination.size,
            pageno: this.pagination.current
          }
        }).then((result) => {
          console.log(result.data)
          this.score = result.data.data.records
        }).catch((err) => {

        });
      },
      //改变当前记录条数
      handleSizeChange(val) {
        this.pagination.size = val
        this.getScore()
      },
      //改变当前页码，重新发送请求
      handleCurrentChange(val) {
        this.pagination.current = val
        this.getScore()
      },
      formatter(row, column) {
        return row.address;
      },
      filterTag(value, row) {
        return row.tag === value;
      },
      filterHandler(value, row, column) {
        const property = column["property"];
        return row[property] === value;
      }
    }
  };
</script>

<style lang="less" scoped>
  .pagination {
    padding-top: 20px;
  }

  .search-input {
    display: flex;
    justify-content: space-between;
    /* 让子元素左右排列 */
    align-items: center;
    /* 垂直居中对齐子元素 */
    margin: 20px 0;
  }

  .search-title {
    flex: 1;
    /* 占据剩余空间 */
    margin-right: 10px;
    /* 设置子元素之间的间距 */
    font-size: 20px;
    font-weight: bold;
  }



  .table {
    opacity: 0.8;
    /* 设置透明度为 0.7，即 70% 不透明 */
    width: 980px;
    margin: 0 auto;

    .title {
      margin: 20px;
    }

    .content-el {
      background-color: #eee;
      padding: 20px;
    }
  }
</style>